<template>
    <div class="ordering">
        <div class="heading">添加学生账号</div>
        <div>
            <div class="MBTI-user">
            <el-button type="primary" class="reg-views" text @click="dialogFormVisible = true">添加学生账号</el-button>
            <el-button type="primary" class="reg-views" text @click="all">所有学生信息</el-button>
                <el-dialog v-model="dialogFormVisible" title="添加学生信息">
                    <el-form :model="form">
                        <el-form-item label="学院" :label-width="formLabelWidth">
                            <el-select v-model="CollegeName" placeholder="选择学院">
                                <el-option label="计算机科学与工程学院" value="计算机科学与工程学院" />
                                <!-- <el-option label="Zone No.2" value="beijing" /> -->
                            </el-select>
                        </el-form-item>
                         <el-form-item label="专业" :label-width="formLabelWidth">
                            <el-select v-model="DepartmentName" placeholder="选择专业">
                                <el-option label="软件工程" value="软件工程" />
                                <el-option label="网络工程" value="网络工程" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="班级" :label-width="formLabelWidth">
                            <el-select v-model="classId" placeholder="选择班级">
                                <el-option label="软件:1" value="1" />
                                <el-option label="网络:21" value="21" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="学号" :label-width="formLabelWidth">
                            <el-input v-model="studentId" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="姓名" :label-width="formLabelWidth">
                            <el-input v-model="StudentName" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="年龄" :label-width="formLabelWidth">
                            <el-input v-model="StudentAge" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="性别" :label-width="formLabelWidth">
                            <el-input v-model="StudentSex" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="密码" :label-width="formLabelWidth">
                            <el-input v-model="password" autocomplete="off" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button  @click="dialogFormVisible=false">完成退出</el-button>
                            <el-button type="primary" @click="Regist ">添加</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <el-table :data="studentdata" style="width: 100%" :stripe="true">
                <el-table-column prop="CollegeName" label="学院" min-width="100" align="center" />
                <el-table-column prop="DepartmentName" label="专业" min-width="100" align="center" />
                <el-table-column prop="classId" label="班号" min-width="100" align="center" />
                <el-table-column prop="studentId" label="学号" min-width="100" align="center" />
                <el-table-column prop="StudentName" label="姓名" min-width="100" align="center" />
                <el-table-column prop="StudentAge" label="年龄" min-width="100" align="center" />
                <el-table-column prop="StudentSex" label="性别" min-width="100" align="center" />
                <el-table-column prop="password" label="密码" min-width="100" align="center" />
            </el-table>
            

        </div>
    </div>

</template>

<script>

import { ElMessage } from 'element-plus'
import { reactive ,toRefs,getCurrentInstance, ref} from 'vue'
export default{
    setup(){

        //进行注册添加
        const {proxy} = getCurrentInstance()
        const dialogTableVisible = ref(false)
        const dialogFormVisible = ref(false)
        const formLabelWidth = '140px'
        const form = reactive({
            CollegeName:'',
            DepartmentName:'',
            classId: '',
            studentId:'',
            StudentName: '',
            StudentAge: '',
            StudentSex: '',
            password:'',
        })

        const studentdata = ref([{
            CollegeName:'',
            DepartmentName:'',
            classId: '',
            studentId:'',
            StudentName: '',
            StudentAge: '',
            StudentSex: '',
            password:'',
        }])

        const all = async()=>{
        const obj2 = {
            CollegeName: "计算机科学与工程学院"
        }
        try {
            const res_all = await new proxy.$request(proxy.$urls.m().ALL_result, obj2).modepost()

            if (res_all.status = 200) {
                studentdata.value = res_all.data.AllList
                console.log(classdata)
            }

        } catch (e) {
            // new proxy.$tips('服务器错误').message()
        }
    }

    const Regist = async()=>{
    const obj = {
      CollegeName:    form.CollegeName, 
      DepartmentName: form.DepartmentName,
      classId:        form.classId,
      studentId:      form.studentId,
      StudentName:    form.StudentName,
      StudentAge:     form.StudentAge,
      StudentSex:     form.StudentSex,
      password:       form.password
      
    }


      

    try{
       const res = await new proxy.$request(proxy.$urls.m().register, obj).modepost()
      
      if(res.status = 200){
        // console.log(form)
        // studentdata.value = form
         ElMessage('注册成功')
       
      }else{
        ElMessage('请重新输入')
      }
      console.log(studentdata)

    }catch(e){
        
    }
    


    }

  


     return{all, studentdata, dialogTableVisible,dialogFormVisible, formLabelWidth,...toRefs(form),proxy,Regist}
}
}


</script>



<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}

</style>






